<template>
  <div class="container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>快手评论</el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="u-cursor" @click="$router.back()">删除快手评论</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <Container class="u-pb60">
      <el-form
        class="m-form--detail"
        label-width="160px"
        :model="pageData"
        :rules="pageRules"
        ref="pageForm"
      >
        <ContainerTitle>快手账户视频评论删除</ContainerTitle>
        <el-form-item prop="mainAccount" size="small" label="投放产品">
          <el-select
            class="u-w350"
            placeholder="请选择投放产品"
            filterable
            v-model="pageData.mainAccount"
            @change="handleChangeMainAccount"
          >
            <el-option
              v-for="(item, index) in mainAccountOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="subAccount" size="small" label="广告主ID：">
          <!-- <el-cascader
            class="u-w350"
            placeholder="请选择广告主ID"
            v-model="pageData.subAccount"
            :props="subOptionProps"
            :options="subAccountOptions"
            @change="handleChangesubAccount"
            filterable
          ></el-cascader> -->
          <el-select
            class="u-w350"
            placeholder="请选择广告主ID"
            filterable
            v-model="pageData.subAccount"
            @change="handleChangesubAccount"
          >
            <el-option
              v-for="item in subAccountOptions"
              :key="item.ksId"
              :label="`${item.accountName}(${item.ksId})`"
              :value="item.ksId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup isFixed align="left">
        <el-button size="small" type="primary" @click="commentDelete"
          >删除评论</el-button
        >
      </ButtonGroup>
    </Affix>
  </div>
</template>
<script>
import ContainerTitle from "@/components/container-title";
import Container from "@/components/container";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";
export default {
  components: {
    ContainerTitle,
    Container,
    Affix,
    ButtonGroup,
  },
  data() {
    return {
      subOptionProps: {
        value: "accountId",
        label: "accountName",
        children: "children",
        multiple: true,
      },
      mainAccountOptions: [],
      subAccountOptions: [],
      pageData: {
        mainAccount: "",
        subAccount: "",
      },
      pageRules: {
        mainAccount: {
          required: true,
          message: "请选择投放产品",
          trigger: ["change", "blur"],
        },
        subAccount: {
          required: true,
          message: "请选择广告主ID",
          trigger: ["blur"],
        },
      },
    };
  },
  methods: {
    handleChangeMainAccount() {
      this.pageData.subAccount = null;
      this.$http({
        method: "get",
        url: "/marketing/api/commentdel/getByProduct",
        params: {
          product: this.pageData.mainAccount,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.subAccountOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleChangesubAccount() {},
    // 获取投放产品
    getMainProduct() {
      this.$http({
        method: "get",
        url: "/marketing/api/commentdel/getAllProduct",
      }).then((res) => {
        if (res.data.code === 1) {
          this.mainAccountOptions = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    open(msg) {
      this.$confirm(msg, "删除状态", {
        confirmButtonText: "确定",
        showCancelButton:false
      });
    },
    commentDelete() {
      this.$refs.pageForm.validate((valid) => {
        if (valid) {
          this.$http({
            method: "get",
            url: "/marketing/api/commentdel/delByAccount",
            params: {
              ksId: this.pageData.subAccount,
            },
          }).then((res) => {
            this.open(res.data.msg);
          });
        }
      });
    },
  },
  created() {
    this.getMainProduct();
  },
};
</script>
<style scoped>
</style>